import React from 'react'
// import
import './LvMark.css'
const LvMark = props => {

    const lv = props.lv

    let section
    if (lv <= 9) {
        section = 1
    } else {
        section = Math.floor(lv / 10) + 1
        if (lv === 50) section = 5
    }
    let m = {
        1: '#95C4FA',
        2: '#8B8FFF',
        3: '#98D1B2',
        4: '#FFC57F',
        5: '#FF9D95',
    }

    let bgC = m[section]

    const t = (
        <div
            className='lv-mark'
            style={{
                backgroundColor: bgC,
            }}
        >
            <span>Lv{lv}</span>
        </div>
    )

    return t

}


export default LvMark
